<template>
    <div class="svg-icon" :style="{ width: props.width, height: props.width }">
        <svg class="full">
            <use
                class="full"
                :xlink:href="`#icon-${props.name}`"
                :fill="props.color"
            ></use>
        </svg>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    name: {
        type: String,
        default: '',
    },
    color: {
        type: String,
        default: '',
    },
    width: {
        type: String,
        default: '16px',
    },
})
console.log()
</script>

<style scoped lang="less">
.svg-icon {
    width: 16px;
    height: 16px;
    .full {
        width: 100%;
        height: 100%;
    }
}
</style>
